<template>
    <div class="page tabbar_page">
        <keep-alive>
            <router-view />
        </keep-alive>
        <tabbar v-model="tabbarActive" route fixed class="gshadow2" @change="tabBarChange">
            <tabbar-item icon="home-o" name="home" to="/tabs/home">首页</tabbar-item>
            <tabbar-item icon="contact" name="my" to="/tabs/my">我的</tabbar-item>
        </tabbar>
    </div>
</template>

<script>

import { Tabbar, TabbarItem } from "vant";
import NoBack from "@/mixin/noBack.js";

export default {

    name: "tabs",
    mixins: [NoBack],

    data() {
        return {
            tabbarActive: "home",
        }
    },

    created() {
        // 获取服务商状态
        this.$store.dispatch("serverUserStatus");
    },

    mounted() {
        this.tabbarActive = this.$router.history.current.name;
    },

    methods: {
        tabBarChange(tag) {
            if (tag == "home") {
                // 刷新服务商状态
                this.$store.dispatch("serverUserStatus");
            }
        }
    },

    components: {
        Tabbar,
        TabbarItem,
    },
};

</script>

<style lang="scss" scoped>
.tabbar_page {
    height: 100%;
}
</style>
